<template>
  <div class="web-main">
    <!--查询条件-->
    <el-form class="web_form" :inline="true" :class="{'web_form_active': searchFlag }" label-width="120px" style="margin: 6px 0 0 0">
      <el-form-item label="车队公司">
        <!--<el-input v-model="condition.fleetList" clearable placeholder="车队公司" style="width: 160px"></el-input>-->
        <el-select v-model="ciamsListSelected" style="width: 270px;overflow: hidden;padding-right: 20px;"
                   :remote-method="getQueryInputListOneFunc"
                   allow-create multiple filterable default-first-option placeholder="请输入值按下回车键创建"
                   @change="selectCiams">
          <el-option v-for="(item,index) in ciamsList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
        <el-date-picker class="w184"
          v-model="condition.startDate"
          type="date"
          value-format = 'yyyy-MM-dd'
          placeholder="选择日期(开始)">
          </el-date-picker>-
          <el-date-picker class="w184"
          v-model="condition.endDate"
          type="date"
          value-format = 'yyyy-MM-dd'
          placeholder="选择日期(结束)">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="search-box">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <!--charts 报表-->
    <div class="charts-wrapper">
      <el-row type="flex" justify="space-around" class="mb10">
        <el-row type="flex" justify="space-around" class="mb10">
          <el-button size="medium" :type="plainValOne === '10'? 'primary' : ''" @click="queryTypeClick('10','one')">里程数排序</el-button>
          <el-button size="medium" :type="plainValOne === '20'? 'primary' : ''" @click="queryTypeClick('20','one')">车辆数排序</el-button>
          <el-button size="medium" :type="plainValOne === '30'? 'primary' : ''" @click="queryTypeClick('30','one')">平均里程排序</el-button>
          <el-button size="medium"  @click="chartsShowClick('one')">显示/隐藏</el-button>
        </el-row>
        <el-row type="flex" justify="space-around" class="mb10">
          <el-button size="medium" :type="plainValTwo === '10'? 'primary' : ''" @click="queryTypeClick('10','two')">正常率排序</el-button>
          <el-button size="medium" :type="plainValTwo === '20'? 'primary' : ''" @click="queryTypeClick('20','two')">风险率排序</el-button>
          <el-button size="medium" :type="plainValTwo === '30'? 'primary' : ''" @click="queryTypeClick('30','two')">故障率排序</el-button>
          <el-button size="medium"  @click="chartsShowClick('two')">显示/隐藏</el-button>
        </el-row>
      </el-row>
      <el-row type="flex" justify="space-around">
        <!--图表1-->
        <one-select-charts v-show="oneSelectChartsShow" ref="oneSelectCharts" ></one-select-charts>
        <div class="oneSelectCharts" v-show="!oneSelectChartsShow"></div>
        <!--图表2-->
        <two-select-charts v-show="twoSelectChartsShow" ref="twoSelectCharts"></two-select-charts>
        <div class="oneSelectCharts" v-show="!twoSelectChartsShow"></div>
      </el-row>
    </div>
    <!--table-->
    <!--主列表-->
    <div style="width: 100%;position: relative;">
      <el-table
        :data="tableData"
        ref="mainTable"
        header-row-class-name="table-header-center"
        border element-loading-text="正在加载中..."
        @selection-change="handleSelectionChange"
        style="margin: 0 4px;">
        <el-table-column type="selection" width="40      "></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in tableHead'
                         :label="value.title">
          <template slot-scope="scope">
            <!--<div v-if="value.filter">{{scope.row[value.key] | geval(value.filter)}}</div>-->
            <!--<a v-if="value.key === 'no'" href="#" @click="handleLook(scope.row)" style="color: #409EFF; font-size: 12px;">{{scope.row.no}}</a>-->
            <div v-if="value.key === 'gmtCreate'">{{scope.row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</div>
            <div v-else-if="value.key === 'status'">{{scope.row.status | statusFilter}}</div>
            <div v-else>{{scope.row[value.key]}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="toDetailShow('查看',scope.row, '正常')">详情</el-button>
            <!--<el-button type="text" size="mini" @click="toDetailShow('查看',scope.row, '异常')">异常</el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--二级 明细弹窗-->
    <statistical-table-detail
      :edit_flag="detailFlag"
      :edit_main_title="detailMainTitle"
      :edit_select_row="detailRowData"
      ref="statisicalReportDetailRef"
      @edit-close="statisicalReportDetailClose">
    </statistical-table-detail>
    <!-- 占位 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import OneSelectCharts from './statisticalReportConfig/oneSelectCharts'
  import TwoSelectCharts from './statisticalReportConfig/twoSelectCharts'
  import StatisticalTableDetail from './statisticalReportConfig/statisicalReportDetail'
  import * as MonitorMgtAPI from '@/api/monitor'
  import * as Utils from '@/utils/index'
  const defaultTableHead = [
    { key: 'fleetName', title: '车队公司', width: '200' },
    { key: 'totalDistance', title: '行驶总里程(km)', width: '180' },
    { key: 'fault', title: '设备故障(次)', width: '' },
    { key: 'faultCnt', title: '故障车辆数', width: '' },
    { key: 'risk', title: '设备风险(次)', width: '' },
    { key: 'riskCnt', title: '风险车辆数', width: '' },
    { key: 'drivingBehavior', title: '驾驶行为(次)', width: '' },
    { key: 'drivingBehaviorCnt', title: '驾驶行为车辆数', width: '' }
    // { key: 'fatigueDriving', title: '疲劳驾驶', width: '' },
    // { key: 'fatigueDrivingCnt', title: '疲劳驾驶车辆数', width: '200' }
  ]
  // const myDate = new Date()
  // const toDayWeek = myDate.setTime(myDate.getTime() - 3600 * 1000 * 24 * 1)
  // 一天是24*60*60*1000 = 86400000 = 8.64e7
  export default {
    name: '',
    components: { OneSelectCharts, TwoSelectCharts, StatisticalTableDetail },
    data() {
      return {
        tableHead: defaultTableHead,
        searchFlag: true,
        tableData: [],
        selectRow: [],
        loadingCiams: false,
        updateSelect: true,
        ciamsListSelected: [], // 用于存储 已选中的数组
        ciamsList: [], // 用于展示下拉列表
        condition: {
          type: '10',
          sort: '',
          fleetList: '',
          startDate: Utils.parseTime((new Date().getTime() - 8.64e7), '{y}-{m}-{d}'),
          endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d}')
        },
        plainValOne: '',
        plainValTwo: '',
        oneSelectChartsShow: true,
        twoSelectChartsShow: true,
        detailFlag: false, // 明细显示
        detailRowData: {}, // 传入明细的当前列
        detailMainTitle: '' // 明细标题
      }
    },
    mounted() {
      this.getQueryInputListOneFunc('')
    },
    methods: {
      chartsShowClick(val) {
        if (val === 'one') {
          this.oneSelectChartsShow = !this.oneSelectChartsShow
        } else if (val === 'two') {
          this.twoSelectChartsShow = !this.twoSelectChartsShow
        }
      },
      // 获取 列表
      getQueryInputListOneFunc(val) {
        const that = this
        that.loadingCiams = true
        MonitorMgtAPI.getVehiclesFleet(val).then(res => {
          that.loadingCiams = false
          if (res.data && res.data.length > 0) {
            const now_arr = res.data.filter(item => item !== '') // 过滤无车队名的 空数据
            that.ciamsList = now_arr
            that.ciamsListSelected = now_arr.slice(0, 3)
            that.getList()
          } else {
            that.ciamsList = []
            that.ciamsListSelected = []
            that.condition.fleetList = val
          }
        }).catch(err => {
          that.loadingCiams = false
          console.log('error', err)
        })
      },
      // 选择
      selectCiams(value) {
        // this.ciamsListSelected = value
      },
      // 查看面板
      toDetailShow(title, row, type) {
        console.log('toDetailShow()-title', title, row, type)
        const that = this
        that.detailRowData = row
        that.detailMainTitle = title
        that.detailFlag = true
      },
      // 查看明细 弹窗关闭
      statisicalReportDetailClose() {
        this.detailFlag = false
      },
      // 查看明细 弹窗显示
      getInfoList(row) {
        const that = this
        that.detailRowData = row
        that.detailMainTitle = '司机明细'
        that.detailFlag = true
      },
      // 页面总查询
      getList() {
        const that = this
        that.condition.sort = ''
        that.plainValOne = ''
        that.plainValTwo = ''
        if (that.checkCondition(that.condition) && that.checkCiamsSelect(that.ciamsListSelected)) {
          that.condition.fleetList = Utils.arrayToStringFunc(that.ciamsListSelected)
          that.queryChartsOne(that.condition)
          that.queryChartsTwo(that.condition)
          that.queryMainList(that.condition)
        }
      },
      // 排序查询
      queryTypeClick(val, val2) {
        console.log('queryTypeClick()-val', val, val2)
        this.condition.sort = val
        if (val2 === 'one') {
          this.plainValOne = val
          this.queryChartsOne(this.condition)
        } else if (val2 === 'two') {
          this.plainValTwo = val
          this.queryChartsTwo(this.condition)
        }
      },
      // 主页-主table表查询
      queryMainList(condition) {
        const that = this
        that.tableData = []
        MonitorMgtAPI.selVehiclesStatistics(condition).then(res => {
          if (res.data && res.data.length > 0) {
            that.tableData = res.data
          } else {
            that.$message({
              message: '底部列表查询无数据',
              type: 'warning',
              duration: 3000
            })
          }
        }).catch(err => {
          console.log('错误', err)
        })
      },
      // 报表1查询
      queryChartsOne(condition) {
        const that = this
        MonitorMgtAPI.getTotalFleetMiles(condition).then(res => {
          if (res.data && res.data.length > 0) {
            that.oneSelectChartsShow = true
            that.$refs.oneSelectCharts.initCharts(res.data)
          } else {
            that.oneSelectChartsShow = false
            that.$message({
              message: '左侧图表查询无数据',
              type: 'warning',
              duration: 3000
            })
          }
        }).catch(err => {
          console.log('错误', err)
        })
      },
      // 报表2查询
      queryChartsTwo(condition) {
        const that = this
        MonitorMgtAPI.getRiskFaultRate(that.condition).then(res => {
          if (res.data && res.data.length > 0) {
            that.twoSelectChartsShow = true
            that.$refs.twoSelectCharts.initCharts(res.data)
          } else {
            that.twoSelectChartsShow = false
            that.$message({
              message: '右侧图表查询无数据',
              type: 'warning',
              duration: 3000
            })
          }
        }).catch(err => {
          console.log('错误', err)
        })
      },
      // 更多
      moreSearch() {
        this.searchFlag = !this.searchFlag
      },
      // 查询
      search() {
        this.getList()
      },
      // 重置
      resetSearch() {
        this.condition = {
          type: '10',
          sort: '',
          fleetList: '',
          startDate: Utils.parseTime((new Date().getTime() - 8.64e7), '{y}-{m}-{d}'),
          endDate: Utils.parseTime(new Date().getTime(), '{y}-{m}-{d}')
        }
        this.ciamsListSelected = []
        this.ciamsList = []
        this.plainValOne = ''
        this.plainValTwo = ''
        this.getQueryInputListOneFunc('')
        // this.getList()
      },
      checkCondition(condition) {
        const { startDate, endDate } = condition
        if (startDate === '') {
          this.$message({
            message: '请先选择(开始时间)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (endDate === '') {
          this.$message({
            message: '请先选择(结束时间)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (new Date(startDate).getTime() > new Date(endDate).getTime()) {
          this.$message({
            message: '结束时间不得早于开始时间',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 检查
      checkCiamsSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '请先选择车队公司',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 检查是否选择单条
      checkSelect(data) {
        const l = data.length
        if (l === 0) {
          this.$message({
            message: '未选择',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      },
      // 表格改变时
      handleSelectionChange(val) {
        this.selectRow = val
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .charts-wrapper{
    padding: 10px;
    /*display: flex;justify-content: space-around;align-items: center;*/
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 0;
  }
  .oneSelectCharts{
    flex: 1;
    margin: 0 20px 0 0;
    min-width: 430px;
    max-width: 600px;
    /*min-height: 400px;*/
    /*max-height: 440px;*/
    height: auto;
  }
</style>

